<html>

<head>
  <meta charset="utf-8">
  <title>vue-giant-tree demo</title>
  <script src="./vue.min.js"></script>
  <script src="./vue-giant-tree.umd.js"></script>
  <script type="text/javascript" src="./big-tree.json"></script>
  <script type="text/javascript" src="./jquery-1.4.4.min.js"></script>
  <!-- <script type="text/javascript" src="./jquery.ztree.exhide.js"></script> -->
	<script type="text/javascript" src="./fuzzysearch.js"></script>
	
	<style type="text/css">
		.hello {
		  width: 400px;
		  margin: 10px auto;
		  height: 500px;
		  overflow: hidden;
		  overflow-y: auto;
		}
	</style>
</head>

<!-- 

注意  注意  注意  注意  注意  注意


html @on-created 修改 源码中对应的 15182行

		 _this2.$emit('on-created', _this2.ztreeObj);
		 
		 搜索功能 改变  treeDatas 数据， tree结构将会自动重新渲染


-->
     
<body>
  <div id="app" class="hello">
    <input placeholder="搜索关键字" id="search" @change="searchChange" />
    
    <tree :nodes="treeDatas" :setting="setting" @on-created="handleCreated" />

  </div>
  <script>
    const vueGiantTree = window['vue-giant-tree'];
    const treeDatas = bigData.data;
    var vueObj = new Vue({
      el: "#app",
      data() {
        return {
          treeId: null,
          //ztree数据
          treeDatas: treeDatas,
          //ztree对象
          ztreeObj: null,
          //ztree配置，参照ztree官网的配置
          setting: {
            check: {
              //树是否带复选框或者单选框
              enable: true
            },
            data: {
              simpleData: {
                //是否使用简单数据模式
                enable: true,
                //树节点id，一般是后台数据库主键
                idKey: "id",
                //父级id
                pIdKey: "pid",
                // rootPId: "0"
              }
            },
            //ztree回调函数
            callback: {
              //树选择事件
              onNodeCreated: this.zTreeOnNodeCreated,
              onClick: this.onClick,
              onCheck: this.onCheck
            }
          },
          expandNode: []
        }
      },
      components: {
        tree: vueGiantTree
      },
      methods: {
        handleCreated(ztreeObj) {
          console.log("big tree 加载树完成11111111111111111111");
          console.log(ztreeObj);
          this.ztreeObj = ztreeObj;
          // let firstTree = ztreeObj.getNodes()[0];
          // 默认选中第一个
          // ztreeObj.selectNode(firstTree);
          // 设置节点全部展开
          // ztreeObj.expandAll(true);
          //加载完自动点击第一个，加载右边表格
          // this.setting.callback.onClick(null, firstTree.id, firstTree)
		
		  // ztree  原生自带的
          // fuzzySearch(ztreeObj,'#key',null,true); //初始化模糊搜索方法

        },
        zTreeOnNodeCreated(event, treeId, treeNode) {
          console.log("zTreeOnNodeCreated 2222222222222222");
          console.log(treeId);
          this.treeId = treeId;
          
        },


        searchChange(e) {
		  var value = e.target.value;
		  console.log("searchChange success ...... " + value);
		  this.treeDatas = treeDatas;
		  if (value) {
			let nodeList = this.ztreeObj.getNodesByParamFuzzy("name", value); //模糊搜索
			this.treeDatas = nodeList;
		  }
		},


        onClick(evt, treeId, treeNode) {
          console.log("onClick   ");
          // this.ztreeObj.expandAll(true);
        },

        onCheck(evt, treeId, treeNode) {
          console.log("onCheck  ");
          optParOrSon(treeId, treeNode, this.ztreeObj);
        },

      }
    });


    $(function(){
      $("#btn").click(function(){
        var key = $("#key").val();
        console.log(key);
        vueObj.data.onSearch(key);
      });
    });
  </script>
</body>

</html>